<template>
    <div class="layout-route" v-loading="loading">
        <div class="card card-search">
            <el-form :model="queryParams" ref="queryForm" inline>
                <el-form-item label="查询单号" prop="purchase_number">
                    <el-input v-model.trim="queryParams.purchase_number" placeholder="扫描输入运单号，采购单号" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
                </el-form-item>

                <el-form-item label=" ">
                    <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="card card-search" style="padding-bottom: 24px" v-if="hasData">
            <el-row  style="margin-bottom: 8px">
                <el-col :span="8"
                    ><span style="margin-right: 8px">采购单号：</span><span style="color:#999">{{ model.base_info.purchase_number }}</span></el-col
                >
                <el-col :span="8"
                    ><span style="margin-right: 8px">收货仓库：</span><span style="color:#999">{{ model.base_info.warehouse }}</span></el-col
                >
                <el-col :span="8"
                    ><span style="margin-right: 8px; padding-left:1em;">供货商：</span><span style="color:#999">{{ model.base_info.supply_name }}</span></el-col
                >
            </el-row>
            <el-row>
                <el-col :span="8"
                    ><span style="margin-right: 8px">运输单号：</span><span style="color:#999">{{ model.base_info.track_info }}</span></el-col
                >
                <el-col :span="8"
                    ><span style="margin-right: 8px; padding-left:1em;">采购员：</span><span style="color:#999">{{ model.base_info.operater }}</span></el-col
                >
                <el-col :span="8"
                    ><span style="margin-right: 8px">下单时间：</span><span style="color:#999">{{ model.base_info.create_time }}</span></el-col
                >
            </el-row>
        </div>
        <div class="card" v-if="hasData">
            <el-row :gutter="10" style="margin-bottom: 16px">
                <el-col style="font-size: 16px">
                    <span style="font-weight: bold">未到货：</span>
                    <span style="color: #999">
                        <span style="margin-right: 8px">SKU种类：{{ model.count_info.sku_nums }}</span>
                        <span style="margin-right: 8px">总数：{{ model.count_info.arrive_nums }}</span>
                    </span>
                </el-col>
            </el-row>

            <el-table :data="model.sku_info" border script style="margin-bottom: 16px">
                <el-table-column label="图片" min-width="90">
                    <template slot-scope="scope">
                        <ImageUploadImg v-model="scope.row.image_url" :readOnly="true"></ImageUploadImg>
                    </template>
                </el-table-column>
                <el-table-column label="商品sku" prop="seller_sku" min-width="90"></el-table-column>
                <el-table-column label="单价" prop="purchase_price" min-width="90"></el-table-column>
                <el-table-column label="到货数/采购数" prop="arrive_quantity" min-width="90">
                    <template slot-scope="scope">
                        <span
                            ><span style="color: #11a983">{{ scope.row.arrive_quantity }}</span> / {{ scope.row.purchase_quantity }}</span
                        >
                    </template>
                </el-table-column>
                <el-table-column label="本次到货" prop="current_quantity" min-width="120">
                    <template #header>
                        <div>本次到货</div>
                        <div>
                            （<span style="color: #11a983; cursor: pointer; margin-right: 16px" @click="allInsert">全部到货</span>
                            <span style="color: #11a983; cursor: pointer" @click="clearInsert">取消</span>）
                        </div>
                    </template>
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.current_quantity"></el-input>
                    </template>
                </el-table-column>
                <!-- <el-table-column label="操作" width="100" fixed="right">
                        <template slot-scope="scope">
                            <div><el-button type="text" icon="el-icon-document-checked" @click="showDetailDialog(scope.row, 'confirm')">打印标签</el-button></div>
                        </template>
                    </el-table-column> -->
            </el-table>
            <div class="card-footer" style="text-align: right">
                <el-button type="primary" @click="submit">确认入库</el-button>
            </div>
        </div>
    </div>
</template>

<script>
import { purchase_insert_info, purchase_insert } from '@/api/purchase'
export default {
    name: 'InsertInfo',
    components: {},
    data() {
        return {
            // 遮罩层
            loading: false,
            hasData: false,
            // 查询参数
            queryParams: {
                purchase_number: undefined,
            },
            detailDialog: {
                visible: false,
                data: {},
            },
            model: {
                sku_info: [],
                count_info: {},
                base_info: {},
            },
        }
    },
    watch: {
        '$route': {
            handler(val) {        
                this.queryParams.purchase_number =val.query.purchase_number
                this.getList('jump')
            },
            immediate: true
        }
    },
    created() {
        
    },
    methods: {
        ConfirmReceipt(row) {
            this.detailDialog.visible = true
            this.detailDialog.data = row
        },
        allInsert() {
            this.model.sku_info = this.model.sku_info.map(item => {
                
                item.current_quantity = parseFloat(item.purchase_quantity) - parseFloat(item.arrive_quantity)
                return {...item}
            })

        },
        clearInsert() {
            this.model.sku_info = this.model.sku_info.map(item => {
                item.current_quantity = 0
                return {...item}
            })
        },
        //列表
        getList(type='click') {
            if(!this.queryParams.purchase_number) {
                if(type=='click') {
                    return this.$message.error('请输入运单号，采购单号')
                } else {
                    return
                }
            }
            this.loading = true

            purchase_insert_info(this.queryParams)
                .then(response => {
                    this.model = response.data
                    this.hasData = true
                })
                .catch(() => {
                    this.hasData = false
                })
                .finally(() => {
                    this.loading = false
                })
        },

        // 搜索按钮操作
        handleQuery() {
            this.getList()
        },
        submit() {
            
            const params = {
                purchase_number: this.model.base_info.purchase_number,
                sku_info: this.model.sku_info.map(item => {
                    return {
                        seller_sku: item.seller_sku,
                        current_quantity: parseFloat(item.current_quantity||0),
                        id: item.id,
                        purchase_number: item.purchase_number,
                        spu: item.spu,
                    }
                })
            }
            const sum = params.sku_info.reduce((pre, item) => {
                return pre + parseFloat(item.current_quantity||0)
            }, 0)
            console.log('submit', sum)

            if (sum == 0) {
                return this.$message.warning('入库数量不能为0')
            }
            this.loading = true
            purchase_insert(params)
                .then(response => {
                    console.log(response)
                    this.msgSuccess('操作成功')
                })
                .finally(() => {
                    this.loading = false
                })
        },
        // 重置按钮操作
        resetQuery() {
            this.resetForm('queryForm')

            this.handleQuery()
        },
        addRemark(row) {
            this.remarkDialog.visible = true
            this.remarkDialog.data = row
        },
        // 删除按钮操作
        handleDelete(row) {
            this.$confirm('是否确认删除?', '警告', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(async () => {
                    await delInStores({ id: row.id })
                    this.getList()
                    this.msgSuccess('删除成功')
                })
                .catch(() => {})
        },
    },
}
</script>
<style scoped>
::v-deep .el-tabs .el-tabs__content {
    padding: 0;
    border-bottom: 0;
}
.el-tabs--border-card {
    box-shadow: none;
    border-bottom: 0;
}

::v-deep .el-tabs .el-tabs__content {
    padding: 0;
    border-bottom: 0;
}
.table-wrap {
    padding: 15px;
    border-bottom: 1px solid #dfe4ed;
    border-left: 1px solid #dfe4ed;
    border-right: 1px solid #dfe4ed;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
}
</style>
